<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>约见对象</title>
    <link href="../css/font.css" type="text/css" rel="stylesheet">
    <link href="../css/style.css" type="text/css" rel="stylesheet">
    <link href="../css/shijian.css" type="text/css" rel="stylesheet">
    <!--block[hdcss]-->

    <!--block[hdcss]end-->
</head>
<body>
<!--block[content]-->
<section class="wrap">
    <div class="page">
        <!--<header class="hd">头部 </header>-->


        <div class="m-book">
            约见对象
        </div>
        <ul class="m-book-list">
            <li id="add">
                <div class="add" >
                    <img src="../img/icon_add.png" alt="">
                </div>
            </li>
        </ul>

        <div class="listWrap" id="listPanelWrap" style="display:none">
            <ul class="m-opts"  id="listPanel">
            </ul>
            <ul class="m-opts children" id="m-opts">

            </ul>
            <div class="u-btn-area">
                <div>
                    <a class="u-btn" id="fangqi" href="javascript:void(0)">
                        确认
                    </a>
                </div>
            </div>
        </div>


        <ul class="m-info">
            <li>
                <div class="list-item">标题</div>
                <span class="list-val">
                    <input type="text" maxlength="18" class="title" placeholder="请输入标题">
                </span>
            </li>
            <li>
                <div class="list-item">事由</div>
                <span class="list-val textarea">

                    <textarea class="textarea-des" maxlength="50" placeholder="请简单描述约见事由"></textarea>
                </span>

            </li>
            <li>
                <div class="list-item">约见日期</div>
                <span class="list-val">
                    <input type="" id="picktime" class="datetime"  placeholder="请选择约见时间">
                </span>
            </li>
            <li>
                <div class="list-item">时长</div>
                <span class="list-val">
                    <select class="list-time">
                        <option value="0.5">0.5小时</option>
                        <option value="1">1小时</option>
                        <option value="1.5">1.5小时</option>
                        <option value="2">2小时</option>
                        <option value="0">待定</option>
                    </select>
                </span>
            </li>

            <li>
                <div class="list-item">联系方式</div>
                <span class="list-val">
                    <input type="tel" maxlength="11" class="iphone" placeholder="请输入电话号码">
                </span>
            </li>
        </ul>
        <div class="u-btn-area">
            <div>
                <a class="u-btn submit-u-btn u-btn-cancel" href="javascript:void(0)">
                    保存为草稿
                </a>
            </div>
            <div>
                <a class="u-btn submit-u-btn" id="submit" href="javascript:void(0)">
                    &nbsp;立即提交&nbsp;
                </a>
            </div>

        </div>

    </div>
</section>
<footer class="ft">底部</footer>
<script type="text/tmpl" id="jTmpl_user_list">
    {{#data}}
    <li class="user-list" user-id="{{user_id}}">
        <div class="thumb">
            <img src="{{avatar}}" alt="">
            <i class="fa fa-minus-circle "></i>
        </div>
        <div class="person">
            {{name}}
        </div>
    </li>
    {{/data}}
</script>
<script type="text/tmpl" id="jTmpl_department_list">
    {{#data}}
    <li class="on" >
        <div class="cont cont_title" department_id="{{department_id}}">
        <span class="group">
            {{name}}
        </span>
            <span class="num">{{users_count}}人</span>
            <span class="fa fa-angle-down icon-status"></span>
            <span class="fa fa-angle-right icon-status"></span>
        </div>
        <ul class="m-opts children"  style="display:none">

        </ul>
    </li>
    {{/data}}
</script>

<script type="text/tmpl" id="jTmpl_user_list_children">
    {{#data}}
    <li>
        <div class="cont" user_id="{{user_id}}">
            <i  user_id="{{user_id}}" name="{{name}}" avatar="{{avatar}}" class="icon fa fa-circle-o"></i>
            <img src="{{avatar}}" class="thumb" alt="">
            <div class="person">{{name}}</div>
        </div>
    </li>
    {{/data}}
</script>
<!--block[content]end-->
<script src="../js/lib/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../js/lib/mustache.js" type="text/javascript"></script>
<script src="../js/jquer_shijian.js" type="text/javascript"></script>
<script src="http://honey.hunantv.com/honey-2.0/mod/messenger.js?v20150408" type="text/javascript"></script>
<script type="text/javascript">

    window.alert = function (name) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    };

    const baseUrl = 'http://lres.gzhc365.com/gxyj/api/';
    let url = baseUrl + 'user/department_list?callback=';

    Array.prototype.removeByValue = function(val) {
        for(var i=0; i<this.length; i++) {
            if(this[i] == val) {
                this.splice(i, 1);
                break;
            }
        }
    };

    var getDate = function(url,callback){
        var type =  type || 'get';
        $.ajax({
            url:url,// 跳转到 action
            type:'get',
            dataType:'jsonp',
            success:function(data) {
                callback && callback(data);
            }
        });
    };

    $("#picktime").shijian({
        okfun: function(data) { //确认时间时候执行事件
            console.log(data)
        }
    });



    //初始化数据
    var user_list = localStorage.getItem('user_id');
    var jsonstr = JSON.parse(user_list);

    if(jsonstr){
        let tpl = $('#jTmpl_user_list').html();
        let data = {
            data:jsonstr
        }
        let element = Mustache.render(tpl, data);
        $('.m-book-list').prepend(element);
        console.log(23)
    }

    $('.m-book-list').on('click','.fa-minus-circle',function(){
        let id = $(this).parent().parent().attr('user-id');

        $(this).parent().parent().remove();
        $('div[user_id='+id+']').find('i').removeClass('fa-check-circle-o');
        $('div[user_id='+id+']').find('i').addClass('fa-circle-o');
        list_arr.removeByValue(id);
    });

    var year = '';
    var time = '1';


    $(".list-time").change(function(){
        time = $(this).val()
    });

    $('.submit-u-btn').on('click',function(){

        let lock = false;

        if(lock){
            return false;
        }

        let save_as = 1;
        let arr_id = [];
        var jump_url = 'http://lres.gzhc365.com/gxyj/html/yitijiao.html';
        if($(this).hasClass('u-btn-cancel')){
            save_as = 0;
            jump_url = 'http://lres.gzhc365.com/gxyj/html/caogao-list.html';
        }

        function checkPhone(phone){ 
            if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))){ 
                alert("手机号码有误，请重填");  
                return false; 
            } 
        }

        $('.m-book-list li.user-list').each(function(index){
            arr_id.push($(this).attr('user-id'));
        })

        var title = $('.title').val();
        var des = $('.textarea-des').val();
        var year = $('.datetime').val();
        var iphone = $('.iphone').val();

        if(title == ''){
            alert('标题不能为空')
            return false;
        }

        if(des == ''){
            alert('事由不能为空')
            return false;
        }

        if(title == ''){
            alert('内容不能为空')
            return false;
        }

        if(year == ''){
            alert('日期不能为空')
            return false;
        }

        if(iphone == '' || checkPhone(iphone)){
            alert('手机不能为空')
            return false;
        }

        var data = {
            userid:arr_id,
            subject:title,
            content:des,
            start_at:year,
            duration:time,
            phone:iphone,
            save_as:save_as
        };

        console.log(data)

        lock = false;

        $.ajax({
            url:'http://lres.gzhc365.com/gxyj/api/order/create',// 跳转到 action
            type:'post',
            data:data,
            xhrFields:{
                withCredentials: true
            },
            success:function(data) {
                if(data && data.code == 200){
                    lock = true;
                    window.location = jump_url;
                }else if(data.code == 1003){
                    let l = window.location.href;
                    window.location = 'http://lres.gzhc365.com/gxyj/api/auth/wx_authorize?return_url='+l
                }
            }
        });

        // console.log(arr_id)

        // var data = {
        //     id:arr_id.toString(),
        //     subject:title,
        //     content:des,
        //     start_at:year,
        //     duration:time,
        //     phone:iphone,
        //     save_as:save_as
        // }

        // postMsg(data);

    });

    let urls = baseUrl + 'user/department_list?callback=';

    let department_list_tpl = $('#jTmpl_department_list').html();

    //点击增加
    $('#add').on('click',function(){
        $('#listPanelWrap').show();
        getDate(urls,function(data){
            console.log(data.data)
            if(data && data.code == 200){
                let element = Mustache.render(department_list_tpl, data.data);
                $('#m-opts').html(element);
            }
        });
    });

    $('#m-opts').on('click','.cont_title',function(){
        console.log(111)
        let _this = $(this);
        let id = $(this).attr('department_id');
        let url = baseUrl + 'user/list?callback=&department_id='+id;
        let tpl = $('#jTmpl_user_list_children').html();

        console.log($(this).data('show'))
        if($(this).data('show')){
            $(this).next().hide();
            $(this).data('show',false)
        }else{
            $(this).next().show();
            $(this).data('show',true)
        }

        getDate(url,function(data){
            if(data && data.code == 200){
                let element = Mustache.render(tpl, data.data);
                _this.parent().find('ul.m-opts').html(element);
            }else if(json.code == 1003){
                let l = window.location.href;
                window.location = 'http://lres.gzhc365.com/gxyj/api/auth/wx_authorize?return_url='+l
            }
        });

    });

    let list_arr = []
    $('#listPanelWrap').on('click','i.icon',function(){
        let id = $(this).attr('user_id');
        let name = $(this).attr('name');;
        let avatar = $(this).attr('avatar');

        if($(this).hasClass('fa-check-circle-o')){
            $(this).removeClass('fa-check-circle-o');
            $(this).addClass('fa-circle-o');
            list_arr.removeByValue(id);
            $('li[user-id='+id+']').remove()
        }else{
            $(this).addClass('fa-check-circle-o');
            $(this).removeClass('fa-circle-o');
            list_arr.push(id);

            let str = `<li class="user-list" user-id="`+id+`">
                <div class="thumb">
                    <img src="`+avatar+`" alt="">
                    <i class="fa fa-minus-circle "></i>
                </div>
                <div class="person">
                    `+name+`
                </div>
            </li>`;
            //增加约见对象
            $('.m-book-list').prepend(str);
        }
    });

    //放弃
    $('#fangqi').on('click',function(){
        $('#listPanelWrap').hide();
    })

</script>
<!--block[endscript]end-->
</body>
</html>